.banner-nav {
    margin: 0 auto;
    /* margin-top: 40px; */
    width: 1226px;
    height: 760px;
    background-color: #fff;
    /* overflow: hidden; */
}

.banner-nav .nav-head {
    position: relative;
    float: left;
    width: 100%;
    height: 100px;
    background-color: #fff;
}

.banner-nav .nav-head .nav-logo {
    float: left;
    height: 100%;
}

.banner-nav .nav-head .logo-img {
    margin-top: 22px;
    widows: 56px;
    height: 56px;
}

/* 导航中心 */
.banner-nav .nav-head .nav-c {
    float: left;
    height: 100px;
    margin-left: 150px;
}

.banner-nav .nav-head .c-list {
    float: left;
    margin-left: 18px;
    font-size: 10px;
    color: #333;
    line-height: 100px;
}

.banner-nav .nav-head .c-list .list-iteam {
    display: block;

}

.banner-nav .nav-head .c-list .list-iteam:hover {
    color: #ff6700;
}

/* 搜索按钮 */
.banner-nav .nav-head .nave-search {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    margin-top: 24px;
    /* background-color: #f0eb62; */
}

.banner-nav .nav-head .nave-search .search-bton {
    width: 52px;
    height: 50px;
    background: url(search.png) no-repeat 12px;
    background-size: 26px;
    border: #333 solid 1px;
    border-left: none;

}

.banner-nav .nav-head .nave-search .search-bton.search-bton:hover {
    background: url(search\ -active.png) no-repeat 12px;
    background-size: 26px;
    background-color: #ff6700;
    border-color: #ff6700;
}

/* 搜索框 */
.banner-nav .nav-head .nave-search .search-box {
    display: block;
    float: left;
    height: 48px;
    border: #333 solid 1px;
    text-indent: 2em;
    font-size: 14px;
}

.banner-nav .nav-head .nave-search:hover .search-box {
    background-color: #fff;
    /* border-color: #ff6700; */
    border: #ff6700 solid 1px;
}

/* 中间巨幕banner部分  */
.banner {
    float: left;
    width: 1226px;
    height: 460px;
    background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f407f3a0ca58a6946ea805e47b3c30b6.jpg?thumb=1&w=1226&h=460&f=webp&q=90);
}

.banner .banner-category {
    float: left;
    width: 234px;
    height: 100%;

    background-color: rgba(105, 101, 101, .6);
}

.banner .banner-category .category-list-01 {
    margin-top: 20px;
}

.banner .banner-category .category-list {
    position: relative;
    float: left;
    width: 100%;
    height: 42px;

}

.banner .banner-category .category-list:hover {
    background: #ff6700;
}

.banner .banner-category .category-list .link-list-iteam {
    margin-left: 30px;
    display: block;
    font-size: 14px;
    color: #fff;
    line-height: 42px;

}

.banner .banner-category .category-list .link-list-arr {
    position: absolute;
    line-height: 42px;
    font-weight: 900;
    right: 30px;
    color: #fff;
}

/* 右侧部分 */
.banner .banner-right {
    position: relative;
}

/* 右侧箭头部分 */
.banner .banner-right .arr-banner-right {

    float: left;
}

.banner .banner-right .left-arr {
    position: absolute;
    display: block;
    top: 195.5px;
    width: 41px;
    height: 69px;
    background: url(arr.png) no-repeat;
    background-position: -82px;

}

.banner .banner-right .left-arr:hover {
    background-position: 0;
}

.banner .banner-right .arr-banner-right .right-arr {
    position: absolute;
    display: block;
    width: 41px;
    height: 69px;
    top: 195.5px;
    left: auto;
    right: 0;

    background-color: #fff;
    background: url(arr.png) no-repeat;
    background-position: -123px;
}

.banner .banner-right .arr-banner-right .right-arr:hover {
    background-position: -41px;
}

/* 右小角小点 */
.banner .banner-right .banner-right-dot {
    float: left;
    height: 20px;
    position: absolute;
    right: 50px;
    bottom: -420px;
}

.banner .banner-right .banner-right-dot .dot-list {
    float: left;
    margin-right: 10px;
    width: 15px;
    height: 15px;
    background: #fff;
    cursor: pointer;
    border: 2px solid gray;
    /* 正方形=》圆形 */
    border-radius: 50%;
}
.banner .banner-right .banner-right-dot .dot-list:hover{
    background: gray;
}


/* /* 下部售后服务及旗舰手机推荐 */
.banner-nav .banner-serves{
    float: left;
    margin-top: 14px;
    width: 1226px;
    height: 170px;
    overflow: hidden;
}
.banner-nav .banner-serves .banner-afterserves{
    float: left;
    width: 234px;
    height: 100%;
    background-color: #5f5750;
}
.banner-nav .banner-serves .afterserves-list{
    float: left;
    margin-left: 6px;
    width: 70px;
    height: 82px;
   
    text-align: center;
}
.banner-nav .banner-serves .link-afterserves{
    color: #e6e6e6;
}
.banner-nav .banner-serves .afterserves-logo{
  
    margin:auto 23px;
    margin-top: 18px;
    width: 24px;
    height: 24px;
}
/* 旗舰手机推荐 */
.banner-nav .banner-serves .superphone-area{
    float:left;
    /* margin-left: 44px; */
    width: 992px;
    height: 100%;
    transition: all ease 0.4s;
}
.banner-nav .banner-serves .superphone-area .superphone-list{
    float: right;
    transition: all ease 0.4s;
    margin-left: 14px;
}
.banner-nav .banner-serves .superphone-area .superphone-list:hover{
        /* css3过渡 */
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.banner-nav .banner-serves .img-superphone{
    width: 316px;
    height: 100%;
}

